<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"><!--字体样式会随着页面大小变化，
    同时在css中定义white-space: nowrap就能让文字不会随着页面变小而换行突出框架-->
    <title>小练习</title>
    <link href="DemoCss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <!--头部banner,初始背景色-蓝-->
    <div id="bannerTop"><p id="topText">八千老狗舔不住，逼王已过万重山</p></div>
    <div id="container"><!--中部主体区-->
        <!--侧边栏-->
        <div class="leftNav"></div>
        <!--主体区，三个功能按钮-->
        <div class="content">
            <div class="headCopy">
                <button onclick="changeText()"><b>吟唱</b></button>
                <input id="inputText" type="text" placeholder="高调输入你的高逼格宣言" maxlength="30"/>
            </div>
            <div class="headColor">
                <button onclick="changeColor()" style="display: block;margin: 0 auto">
                    切换你头顶的色彩
                </button>
            </div>
            <div class="displayHide">
                <input class="button" type="button" value="隐匿"/>
            </div>
        </div>
    </div>
    <!--页尾-->
    <div id="footerBanner">页尾文案</div>
    <script type="text/javascript" src="DemoJs.js"></script>
</body>
</html>